import { Component } from 'react';
class DemoEventFn extends Component {
    constructor () {
      super()
      this.state = {
        count: 10
      }
      // this.add = this.add.bind(this) 
    }
    // add () {
    //   console.log('this', this)
    //   this.setState({
    //     count: this.state.count + 1
    //   })
    // }
    
    // 定义add为箭头函数
    add = () => {
      console.log('this', this)
      this.setState({
        count: this.state.count + 1
      })
    }
    render() { 
        return (<div className='serach'>
          {/* <input type="text" /><button>按钮</button> */}
          <h2>02.事件处理-更改this指向</h2>
          count: { this.state.count }
          {/* <button onClick={this.add}>count++</button> */}
          <button onClick={this.add.bind(this)}>使用bind count++</button>
          {/* 箭头函数 */}
          <button onClick={() => this.add()}>使用箭头函数的方式count++</button>
          {/* 定义事件函数为箭头函数 */}
          <button onClick={ this.add }>使用箭头函数的方式count++</button>
        </div>)
    }
}
 
export default DemoEventFn;